<template>
  <div class="book-detail-container">
    <!-- 1. 头部 -->
    <div class="book-header-container">
      <div class="book-cover">
        <span>上新</span>
      </div>
    </div>
    <!-- 2. 书的相关人物信息 -->
    <div class="book-persons-container">
      <div class="person-item">
        <div class="person-label">
          <font>作</font>
          <font>者:</font>
        </div>
        <font>宅王鹏</font>
      </div>
      <hr>
      <div class="person-item">
        <div class="person-label">
          <font>演</font>
          <font>讲</font>
          <font>者:</font>
        </div>
        <font>宅王鹏</font>
      </div>
      <hr>
      <div class="person-item">
        <div class="person-label">
          <font>系</font>
          <font>列:</font>
        </div>
        <font>宅王鹏</font>
      </div>
      <hr>
    </div>
    <!-- 3. 作品属性 -->
    <div class="book-properties-container">
      <div class="property-item">
        <img src="../../images/book_detail_star.png">
        <p> 教育部新课必读书目 </p>
      </div>
      <div class="property-item">
        <img src="../../images/book_detail_star.png">
        <p> 民国四大才子宅王鹏代表作</p>
      </div>
      <div class="property-item">
        <img src="../../images/book_detail_star.png">
        <p>现代诗性小说大师之作</p>
      </div>
    </div>
    <hr>

    <!-- 4. 作品简介 -->
    <div class="book-introduce-container">
      <span>音频简介</span>
      <div class="introduce-content">
        <p>
          人类教育部新课必读书目，国民四大才子宅王鹏代表作，现代诗性小说大师之作。 人类教育部新课必读书目，国民四大才子宅王鹏代表作，现代诗性小说大师之作。 人类教育部新课必读书目，国民四大才子宅王鹏代表作，现代诗性小说大师之作。
        </p>
        <div class="intoduce-whole">
          <span @click="toLookWhole">查看全部</span>
        </div>
      </div>
    </div>
    <hr>
    <!-- 5. 作品单集/章集 播放列表 -->
    <div class="book-list-container">
      <router-link to="/audio-play" v-for="item of bookList" :key="item.id" class="book-item" tag="div">
        <div class="item-content">
          <div class="item-icon" :class="{'icon-playing':item.isPlaying}">
            <img :src="item.isPlaying?'../../src/images/book_item_play.png':'../../src/images/book_item_pause.png'">
          </div>
          <div class="item-describe">
            <h3 :class="{'item-playing':item.isPlaying}">
              发刊词：为什么抱元科技没有食堂？
            </h3>
            <h4>
              史上最会钓鱼的老头
            </h4>
            <div class="bottom-container">
              <span v-if="item.isAudition">试听</span>
              <p>00:06:22 | 已听1%</p>
            </div>
          </div>
        </div>
        <hr>
      </router-link>
    </div>
    <!-- 6. 分页布局 -->
    <div class="load-more-container">
      <span>没有更多了，不要再拉啦～</span>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      bookList: [
        { isAudition: true, isPlaying: true },
        { isAudition: true, isPlaying: false },
        { isAudition: false, isPlaying: false },
        { isAudition: false, isPlaying: false },
        { isAudition: false, isPlaying: false },
        { isAudition: false, isPlaying: false },
        { isAudition: false, isPlaying: false },
        { isAudition: false, isPlaying: false }
      ]
    };
  },
  methods: {
    toLookWhole() {
      this.$router.push({ path: "/course-descrip", query: {}, replace: true }); //query参数，replace 表示当前组件移除
    }
  }
};
</script>
<style lang="scss" scoped>
.book-detail-container {
  background-color: white;
  hr {
    height: 1px;
    border: none;
    margin: 0 10px;
    background-color: rgb(237, 237, 237);
  }
  //1. 作品封面介绍
  .book-header-container {
    height: 220px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #f6f5f6;
    padding-top: 18px;

    .book-cover {
      position: relative;
      height: 175px;
      width: 134px;
      background-color: #fde3e3;
      span {
        border-top-right-radius: 10px;
        background-color: red;
        font-weight: 500;
        padding: 5px 10px;
        position: absolute;
        bottom: 0;
        color: white;
        font-size: 18px;
        letter-spacing: 2px;
      }
    }
  }
  //2. 相关人物介绍
  .book-persons-container {
    display: flex;
    flex-direction: column;
    .person-item {
      padding: 24px 20px;
      background-color: white;
      display: flex;
      flex-direction: row;
    }
    .person-label {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 62px;
      margin-right: 10px;
    }
    .person-label > font {
      color: rgb(170, 175, 188);
      font-size: 14px;
    }
    .person-item font :nth-child(2) {
      color: rgb(22, 35, 60);
      font-size: 14px;
    }
  }
  //3. 相关属性/称号介绍
  .book-properties-container {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    .property-item {
      display: flex;
      flex-direction: row;
      margin: 4px 0px;
    }
    .property-item img {
      width: 14px;
      height: 14px;
    }
    .property-item p {
      color: rgb(22, 35, 60);
      font-size: 14px;
      line-height: 14px;
      margin: 0;
    }
  }
  //4. 作品简介
  .book-introduce-container {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    box-sizing: content-box;
    span {
      margin-top: 24px;
      font-size: 16px;
      line-height: 18px;
      font-weight: 800;
      color: rgb(62, 62, 83);
    }
    .introduce-content {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      p {
        margin: 0;
        font-size: 16px;
        color: rgb(22, 35, 60);
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
      }
      .intoduce-whole {
        text-align: center;
        margin: 24px 0;
      }
      .intoduce-whole span {
        font-size: 18px;
        color: rgb(255, 163, 47);
      }
    }
  }
  //5. 作品单集/章集列表
  .book-list-container {
    display: flex;
    flex-direction: column;
    .book-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .item-icon {
        align-self: center;
        width: 48px;
        height: 48px;
        padding: 14px 15.5px 14px 17.5px;
        box-sizing: border-box;
        background-color: #fde3e3;
        border-radius: 48px;
      }
      .icon-playing {
        padding: 15.5px 14px 15.5px 14.5px;
      }
      .item-icon img {
        width: 14px;
        height: 20px;
        margin: auto 0;
      }
      .icon-playing img {
        width: 19.5px;
        height: 17px;
        margin: auto 0;
      }
    }
    .book-item .item-content {
      margin-left: 18px;
      display: flex;
      flex-direction: row;
    }
    .item-describe {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      h3 {
        font-size: 14px;
        color: rgb(22, 35, 60);
        margin: 12px 0 0 0;
        line-height: 14px;
      }
      h4 {
        margin: 10px 0 0 0;
        font-size: 12px;
        line-height: 12px;
        color: rgb(102, 102, 102);
      }
      .item-playing {
        color: rgb(255, 163, 47);
      }
    }
    .bottom-container {
      display: flex;
      flex-direction: row;
      margin: 10px 0 12px 0;
      align-items: center;
    }
    .bottom-container span {
      background-color: #ea605c;
      color: white;
      padding: 1px 5px;
      border-radius: 5px;
      font-size: 13px;
      margin-right: 10px;
    }
    .bottom-container p {
      font-size: 12px;
      color: rgb(148, 154, 170);
      margin: 0;
    }
  }
  // 6. 分页布局
  .load-more-container {
    width: 100%;
    text-align: center;
    height: 32px;
    font-size: 12px;
    padding: 48px 0;
    color: rgb(200, 200, 200);
  }
}
</style>
